<template>
  <h4>当前的x={{x}}</h4>
  <h4>当前的y.a={{y.a}}</h4>
  <button @click="x++">点我x++</button>
  <button @click="y.a++">点我y.a++</button>
  <hr>
  <h2>一个人的信息</h2>
  <h3>姓名：{{name}}</h3>
  <h3>年龄：{{age}}</h3>
  <h3>薪资：{{job.j1.salary}}k</h3>
  <button @click="name += '~'">修改姓名</button>
  <button @click="age++">增加年龄</button>
  <button @click="job.j1.salary++">加薪</button>
</template>

<script>
import { reactive, toRefs, shallowReactive, shallowRef} from 'vue';
export default {
  name: 'Demo', 
  setup() {
    //shallowReactive定义浅层的响应式数据，即只处理对象中第一层属性的响应式，区别于reactive
    let person = shallowReactive({
        name: '张三',
        age: 18,
        job: {
            j1: {
                salary: 20, 
            }
        }
    })
    
    //定义基本类型响应式数据时，shallowRef和ref没有区别
    let x = shallowRef(0)
    //定义对象类型响应式数据时，shallowRef不处理属性的响应式，只处理y.value这一层修改的响应式，区别于ref
    let y = shallowRef({
      a: 10,
    })
    console.log(x, y)

    return {
      ...toRefs(person),
      x,
      y,
    }
  }
}
</script>

<style>
</style>